<template>
  <div class="home">
    <div class="message-box">
      <a-input
        :style="{ width: '320px' }"
        placeholder="Please enter something"
        v-model="message"
        allow-clear
      />
      <a-button @click="startStream" :loading="isStreaming">提交</a-button>
    </div>
    <div class="output-area" ref="outputArea" v-html="markdownContent"></div>
    <div v-if="error" class="error-message">
      {{ error }}
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import MarkdownIt from "markdown-it";
const log = ref("");
const message = ref("");
const error = ref("");
const isStreaming = ref(false);
const md = new MarkdownIt();
const outputArea = ref(null);
let eventSource = null;
const markdownContent = computed(() => {
  // 处理换行符
  return md.render(log.value);
});
const startStream = () => {
  isStreaming.value = true;
  if (!eventSource || eventSource.readyState === EventSource.CLOSED) {
    eventSource = new EventSource(
      `api/send/deepseek?prompt=${encodeURIComponent(message.value)}`,
      {
        withCredentials: false,
      }
    );

    eventSource.onopen = (e) => {
      console.log("SSE 连接已建立");
    };

    eventSource.onmessage = (e) => {
      isStreaming.value = false;
      const data = JSON.parse(e.data);
      if (data.type === "start") {
        log.value += `${data.content}\n`;
        // 随着内容自动滚动
        outputArea.scrollTop = outputArea.scrollHeight;
      } else {
        close();
      }

      if (data.error) {
        error.value = data.error;
        close();
      }
      // console.log("收到服务器消息:", data);
    };

    eventSource.onerror = (e) => {
      console.error("SSE 错误:", e);
    };
  }
};

const close = () => {
  if (eventSource) {
    eventSource.close();
    console.log("SSE 连接已关闭");
    isStreaming.value = false;
    eventSource = null;
  }
};
</script>

<style scoped>
.home {
  margin: 2rem auto;
  padding: 0 1.5rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", sans-serif;
  background-color: #f8f9fa;
}

.message-box {
  display: flex;
  gap: 12px;
  margin-bottom: 2rem;
  align-items: center;
}

.ant-input {
  flex: 1;
  border-radius: 8px;
  border: 1px solid #d9d9d9;
  padding: 12px 16px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.ant-input:hover {
  border-color: #40a9ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.ant-input:focus {
  border-color: #1890ff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.ant-btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.ant-btn:hover:not([disabled]) {
  background-color: #40a9ff;
  color: white;
}

.ant-btn[disabled] {
  background-color: #d9d9d9;
  cursor: not-allowed;
}

.output-area {
  scroll-behavior: smooth;
  background-color: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid #e8e8e8;
  margin-bottom: 1.5rem;
  min-height: 150px;
  overflow-y: auto;
  line-height: 1.6;
  font-size: 15px;
  color: #333;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.error-message {
  background-color: #fff2f0;
  color: #ff4d4f;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #ffccc7;
  margin-top: 1rem;
  font-size: 14px;
}

/* Markdown 样式 */
.output-area h1 {
  font-size: 24px;
  margin-top: 0;
  border-bottom: 1px solid #eaecef;
  padding-bottom: 0.3em;
}

.output-area code {
  background-color: rgba(27, 31, 35, 0.05);
  border-radius: 3px;
  padding: 0.2em 0.4em;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
    monospace;
}

.output-area pre {
  background-color: #f6f8fa;
  border-radius: 6px;
  padding: 16px;
  overflow: auto;
  margin: 1em 0;
}

.output-area blockquote {
  border-left: 4px solid #dfe2e5;
  padding-left: 12px;
  color: #6a737d;
  margin-left: 0;
}
</style>
